<template>
  <div id="wordCloud2" style="width: 1000px; height: 800px"></div>
</template>

<script>
// 引入基础 ECharts 库
import * as echarts from 'echarts'
// 引入词云图扩展库
import 'echarts-wordcloud'
import wordCloudData from './word_cloud_data2.json'

export default {
  name: 'EcharsSimple',
  mounted() {
    this.initWordCloud()
  },
  methods: {
    initWordCloud() {
      // 初始化 echarts 实例
      const myChart = echarts.init(document.getElementById('wordCloud2'))

      // 配置词云图的选项
      const option = {
        series: [
          {
            type: 'wordCloud',
            gridSize: 20,
            sizeRange: [20, 80],
            rotationRange: [-90, 90],
            shape: 'circle',
            textStyle: {
              normal: {
                color: function () {
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(',') +
                    ')'
                  )
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333',
              },
            },
            data: wordCloudData,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
  },
}
</script>

<style scoped></style>
